<template>
	<view class="">
		<view v-if="data.length">
			<order class="item" v-for="(item, index) in data" :key="index" :item="item">

				<view slot="status" class="status">待收货</view>
				<view class="btns" slot="btn">
					<view class="btn view" @click="receive(item.i)">确认收货</view>
				</view>
			</order>
		</view>
		<empty v-if="isEmpty
		&& activedIndex == 2" style="background-color: rgb(242, 242, 242)" description="空空如也" />
	</view>
</template>

<script>
	import {
		receiveOrder,
		untakeOrder
	} from "network/user";
	import Order from "@/components/common/Order/Order";
	import Empty from "@/components/common/Empty/Empty";
	export default {
		components: {
			Order,
			Empty
		},
		props: ["activedIndex"],
		data() {
			return {
				data: [],
				isEmpty: false,
			};
		},
		computed: {},
		watch: {},
		methods: {
			receive(i) {
				uni.showModal({
					title: "提示",
					content: `确认收货?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							await receiveOrder(JSON.stringify({
								i
							})).then(async (res) => {
								if (res[1].data.tag) {
									await this.success("已确认收货");
									this.reload();
								}
							});
						} else {
							this.info('已取消');
						}
					},
				})

			},
			loadOrder() {
				untakeOrder().then((res) => {
					let arr = [];
					for (let item of res[1].data.data) {
						let {
							created,
							price,
							count,
							i
						} = item,
						data = JSON.parse(item.data);
						arr.push({
							created,
							data,
							price,
							count,
							i
						});
					}
					console.log('untakeOrder', res, arr.length);
					if (arr.length === 0) {
						this.isEmpty = true;
						this.$emit("empty", true);
					} else {
						this.$emit("empty", false);
					}
					this.$set(this, "data", arr);
				});
			},
		},
		created() {
			this.loadOrder();
			console.log('isEmpty', this.isEmpty);
		},
		mounted() {},
	};
</script>
<style lang="scss" scoped>
	.item {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100vw;
		padding: 20rpx 5vw;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */
		background-color: white;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.status {
		color: rgb(192, 192, 192);
	}

	.btns {

		display: flex;
		flex-direction: row-reverse;
		align-items: center;

		/* #ifdef H5 */
		gap: 40rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN || APP */
		width: 100%;

		/* #endif */

		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.btns .view {
		height: 60rpx;
		border: 2rpx solid rgb(219, 219, 219);
		border-radius: 30rpx;
		width: 160rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		border: 2rpx solid rgb(254, 191, 184);
		color: red;
		font-weight: 550;

	}
</style>
